<template>
  <Transition name="fade">
    <div
      class="store-title"
      :class="{ 'hide-shadow': isHideShadow }"
      v-show="shelfTitleVisible"
    >
      <!-- 标题：书架\选择书籍 -->
      <div class="shelf-title-text-wrapper">
        <span class="shelf-title-text">{{ $t('shelf.title') }}</span>
        <span class="shelf-title-sub-text" v-show="isEditMode">
          {{ selectedText }}
        </span>
      </div>

      <!-- 清除缓存按钮 -->
      <div class="shelf-title-btn-wrapper shelf-title-left">
        <span class="shelf-title-btn-text" @click="clearCache">
          {{ $t('shelf.clearCache') }}
        </span>
      </div>

      <!-- 编辑按钮 -->
      <div class="shelf-title-btn-wrapper shelf-title-right">
        <span class="shelf-title-btn-text" @click="onEditClick">
          {{ isEditMode ? $t('shelf.cancel') : $t('shelf.edit') }}
        </span>
      </div>
    </div>
  </Transition>
</template>

<script>
import { clearLocalForage } from '@/utils/localForage';
import { clearLocalStorage } from '@/utils/localStorage';
import { storeShelfMixin } from '@/utils/mixin';

export default {
  mixins: [storeShelfMixin],
  data() {
    return {
      isHideShadow: true, // 是否隐藏阴影
    };
  },
  computed: {
    selectedText() {
      const selectedNumber = this.shelfSelected ? this.shelfSelected.length : 0;
      return selectedNumber <= 0
        ? this.$t('shelf.selectBook')
        : selectedNumber === 1
        ? this.$t('shelf.haveSelectedBook').replace('$1', selectedNumber)
        : this.$t('shelf.haveSelectedBooks').replace('$1', selectedNumber);
    },
  },
  watch: {
    offsetY(offsetY) {
      if (offsetY > 0) {
        this.isHideShadow = false;
      } else {
        this.isHideShadow = true;
      }
    },
  },
  methods: {
    // 编辑按钮/取消按钮  两个文本因情况不同而切换
    onEditClick() {
      // 切换为取消按钮时执行的逻辑
      if (!this.isEditMode) {
        // 清空用户所选中的电子书的数组
        this.setShelfSelected([]);
        // 还原item.selected状态
        this.shelfList.forEach((item) => (item.selected = false));
      }
      // 切换为取消按钮
      this.setIsEditMode(!this.isEditMode);
    },
    // 清除缓存按钮
    clearCache() {
      clearLocalStorage();
      clearLocalForage();
      this.setShelfList();
      this.setShelfSelected();
      this.getShelfList();
      this.simpleToast(this.$t('shelf.clearCacheSuccess'));
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.store-title {
  position: relative;
  z-index: 130;
  width: 100%;
  height: px2rem(42);
  background: #fff;
  box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, 0.1);

  &.hide-shadow {
    box-shadow: none;
  }

  .shelf-title-text-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: px2rem(42);
    @include columnCenter;
    .shelf-title-text {
      font-size: px2rem(16);
      line-height: px2rem(20);
      font-weight: bold;
      color: #333;
    }
    .shelf-title-sub-text {
      font-size: px2rem(10);
      color: #333;
    }
  }

  .shelf-title-btn-wrapper {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    height: 100%;
    @include center;

    .shelf-title-btn-text {
      font-size: px2rem(14);
      color: #666;
    }

    &.shelf-title-left {
      left: 0;
      padding-left: px2rem(15);
    }
    &.shelf-title-right {
      right: 0;
      padding-right: px2rem(15);
    }
  }
}
</style>
